<template>
  <div class="demo no-padding popup-demo">
    <h2>{{ translate("basic") }}</h2>
    <quark-cell-group>
      <quark-cell
        islink
        type="primary"
        @click="open = true"
        :title="translate('popupTitle')"
      ></quark-cell>

      <quark-cell
        islink
        type="primary"
        @click="open2 = true"
        :title="translate('popupTitle2')"
      ></quark-cell>
    </quark-cell-group>

    <h2>{{ translate("customTitle") }}</h2>
    <quark-cell
      islink
      type="primary"
      @click="open3 = true"
      :title="translate('customTitle')"
    ></quark-cell>

    <quark-popupextra
      title="大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案"
      :open="open"
      @close="open = false"
    >
      <div class="popup-body">
        <h4 class="">1.正正正正正正正正正正正</h4>
        <p>
          孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
          故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法
          。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒
          暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇
          、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之
          者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰
          行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。
          將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。
          計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。
          兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利
          而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親
          而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。
          夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不
          勝，而況無算乎！吾以此觀之，勝負見矣。
        </p>
      </div>
    </quark-popupextra>

    <quark-popupextra
      title="大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案大标题文案"
      subtitle="副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案副标题文案"
      :open="open2"
      safearea
      @close="open2 = false"
    >
      <div class="popup-body">
        <h4 class="">1.正正正正正正正正正正正</h4>
        <p>
          孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
          故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法
          。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒
          暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇
          、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之
          者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰
          行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。
          將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。
          計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。
          兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利
          而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親
          而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。
          夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不
          勝，而況無算乎！吾以此觀之，勝負見矣。
          孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
          故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法
          。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒
          暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇
          、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之
          者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰
          行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。
          將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。
          計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。
          兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利
          而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親
          而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。
          夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不
          勝，而況無算乎！吾以此觀之，勝負見矣。
          孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
          故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法
          。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒
          暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇
          、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之
          者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰
          行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。
          將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。
          計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。
          兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利
          而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親
          而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。
          夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不
          勝，而況無算乎！吾以此觀之，勝負見矣。
        </p>
      </div>
    </quark-popupextra>

    <quark-popupextra :open="open3" @close="open3 = false">
      <div slot="title" style="margin: 20px">
        <span style="color: red">自定义</span>大标题文案
      </div>
      <div class="popup-body">
        <h4 class="">1.正正正正正正正正正正正</h4>
        <p>
          孫子曰：兵者，國之大事，死生之地，存亡之道，不可不察也。
          故經之以五，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法
          。道者，令民于上同意者也，可與之死，可與之生，民不詭也。天者，陰陽、寒
          暑、時制也。地者，高下、遠近、險易、廣狹、死生也。將者，智、信、仁、勇
          、嚴也。法者，曲制、官道、主用也。凡此五者，將莫不聞，知之者勝，不知之
          者不勝。故校之以計，而索其情。曰：主孰有道？將孰有能？天地孰得？法令孰
          行？兵眾孰強？士卒孰練？賞罰孰明？吾以此知勝負矣。
          將聽吾計，用之必勝，留之﹔將不聽吾計，用之必敗，去之。
          計利以聽，乃為之勢，以佐其外。勢者，因利而制權也。
          兵者，詭道也。故能而示之不能，用而示之不用，近而示之遠，遠而示之近。利
          而誘之，亂而取之，實而備之，強而避之，怒而撓之，卑而驕之，佚而勞之，親
          而離之，攻其不備，出其不意。此兵家之勝，不可先傳也。
          夫未戰而廟算勝者，得算多也﹔未戰而廟算不勝者，得算少也。多算勝，少算不
          勝，而況無算乎！吾以此觀之，勝負見矣。
        </p>
      </div>
    </quark-popupextra>
  </div>
</template>

<script>
import { createComponent } from "@/utils/create";
const { createDemo, translate } = createComponent("popupextra");
import { useTranslate } from "@/sites/assets/util/useTranslate";
import { ref, onBeforeMount } from "vue";
export default createDemo({
  setup() {
    const open = ref(false);
    const open2 = ref(false);
    const open3 = ref(false);

    onBeforeMount(() => {
      useTranslate({
        "zh-CN": {
          basic: "基本用法",
          customTitle: "自定义头部",
          popupTitle: "主标题",
          popupTitle2: "主副标题",
        },
        "en-US": {
          basic: "Basic Usage",
          customTitle: "custom title",
          popupTitle: "main title",
          popupTitle2: "main subtitle",
        },
      });
    });

    return {
      open,
      open2,
      open3,
      translate,
    };
  },
});
</script>

<style src="./demo.scss"></style>
